Coding
with ChatGPT: activities
2025 Data Science Camp By Dr.
Xijin Ge
Activity 1. Get Ready
Go to ChatGPT.com.
Activity 2. Learn HTML, CSS, JavaScript
Survey: =
Know
HTML, CSS, JavaScript?
Prerequi=
site:
Use a text editor such as =
NotePad,
NotePad++
Learning outcome: Progressively=
improve code.
|
|
Prompts |
Note |
File names |
|
1 |
Act as a computer science profe=
ssor. I am learning HTML. Give me the Hello World example. |
Copy the code. Paste to a Text Editor. Sav=
e. Click
on it to open in a browser. |
Hello v1.html |
|
2 |
Add a short paragraph about the history of HTML. |
|
Hello v2.html |
|
3 |
Show me how to add a links. |
|
|
|
4 |
Help me understand CSS by changing the font
and background color. |
|
|
|
5 |
Show me how JavaScript works by adding a button to this
page, which shows a message when clicked. |
|
|
Note: it is essential to name f= iles and folders properly.
Activity 3. To-do list web page
|
|
Prompts |
Note |
File name |
|
1 |
Write code for a to-do list app that runs in a web
browser. |
|
|
|
2 |
Write code for a to-do list that runs in a web browser.
Tasks can be entered into a box. Once I hit enter, the task appears below=
the
box, along with a checkbox. |
|
|
|
3 |
Once a task is checked, change the font background to
green. |
Follow up prompt. |
Todo v3 color.html |
|
4 |
When a task is checked, show an encouraging message li=
ke
"Great job!" in large size that disappears on its own. |
Follow up prompt. |
Todo v4 message.html |
|
5 |
Add today’s date and current time. |
Follow up prompt. |
Todo v5 time.html |
|
6 |
Customize by yourself. |
|
|
Activity 4. Shooter game.
Learning
outcomes:
● &nb=
sp;
Resubmit prompts to =
get
different code.
● &nb=
sp;
Revise previous prom=
pts.
● &nb=
sp;
Refine iteratively
|
|
Prompts |
|
|
1 |
Write code for a simple shooting game that runs in the
browser. Put everything in =
one
file. |
Resubmit a few times. See the difference in response. =
|
|
2 |
Write code for a shooting game that run in the
browser. Put everything in =
one
file. This game will feature a player at the bottom of a 400x400 playing
area. The player can be mov=
ed
left or right using the arrow keys.
When the space key is pressed the player shoots a projectile. Targets appear randomly on top o=
f the
screen and move down.
Targets disappear after being hit by projectiles. |
Revise the first prompt. Resubmit to get a better working version. |
|
3 |
Change background color to dark grey. |
|
|
4 |
Instead of using the keyboard, the player moves
horizontally using the mouse and shoots when I left click. |
|
|
5 |
Add a score counter. |
|
|
6 |
If the player is hit by the targets, the game is over.=
Users
can restart. |
|
Activity 5. Snake game
Learning outcomes:
· When stuck, start a fresh conversation. Copy the existing code over.
Change the background to red in this app. My code
is: XXXXXXX (paste
existing code).
· Try other LLMs such as Google Gemini
|
|
Prompts |
Note |
|
1 |
Write code for the snake game as one file that runs in=
a
browser. |
Resubmit a few times. See the difference in response. =
|
|
2 |
The snake is just one square. Make it longer. |
Revise the first prompt. Resubmit to get a better working version. |
|
3 |
The snake went out of the boundary. |
|
|
4 |
Can we add a score reporting on the food count? |
|
|
5 |
Change the background to dark grey in this app. My code
is: XXXXXX |
Start a new chat!!!!! Include existing code in prompt.=
|
Activity 6: Publish apps on GitHub.
· Learning outcomes: Publishing games or websites on GitHub.
1. Create an account on GitHub.=
2. Create a repository for the = game or coding project you are working on. For example, I have a repository called datamap= . Source code is at https://g= ithub.com/gexijin/datamap/
3. Upload code and other files needed.
4. Publish the game. Go the homepage of this repository, and then click on = Pages under Settings. Switch to the Main branches and click on Save.
5. Refresh this page after a few minutes. Your app is live at an URL like this https://gexijin.github.io/datam= ap/ Note the difference in the do= main.
![3D"A](3D"CodingwithChatGPT6.27.25_files/image003.jpg")
Create AI chatbots using Gemini
Go to Gemini.Google.com
|
|
Prompt |
|
|
Starship bridge simulator |
Make a working text adventure st=
arship
bridge simulator. there should be different st=
ations
to control and each should use AI in different=
ways
to advance an overall story. |
|
|
AI tutor |
Write code for an AI tutor. The =
users
give a subject. The app uses AI to explain it and give a few short answer
quizzes. The app provides feedback. |
|
Other games that other people tried
|
Game Title |
Game Type |
Prompt Example |
|
Rock Paper Scissors |
Logic game (2D buttons) |
Write a Rock Paper Scissors game using HTML, CSS, and JavaScript.<= o:p> |
|
Guess the Number |
Text-based puzzle |
Create a number guessing game in JavaScript where the computer thi=
nks
of a number between 1 and 100. |
|
Tic Tac Toe |
2D board game |
Generate the code for a Tic Tac Toe game in HTML/JS that two playe=
rs
can play by clicking cells. |
|
Hangman |
Text-based puzzle |
Build a Hangman game in HTML, CSS, and JavaScript. Include a list =
of
words and display blanks for letters. |
|
Quiz Game |
Trivia/quiz |
I want to create a simple quiz game in HTML/JS with 5 multiple-cho=
ice
questions about [topic]. |
|
Pong |
2D arcade game |
Create a simple Pong game using HTML5 canvas and JavaScript. |
|
Snake |
2D arcade game |
Generate a simple Snake game in JavaScript using a 2D grid. |
|
Breakout (Brick Breaker) |
2D arcade game |
Create a Breakout-style game with HTML canvas and JavaScript. |
|
Flappy Bird |
Side-scrolling action |
Build a Flappy Bird game in JavaScript with canvas, gravity, and
pipes. |
|
Space Invaders |
2D arcade shooter |
Create a simple Space Invaders game using HTML5 canvas and JavaScr=
ipt. |
|
Memory Card Match |
Card matching puzzle |
Create a memory card matching game in HTML/CSS/JavaScript with 8 p=
airs
of cards. |
|
Text Adventure |
Text-based adventure |
Make a browser-based choose-your-own-ad=
venture
game using JavaScript. |
|
Whack-a-Mole |
Clicker/reflex game |
Write code for a Whack-a-Mole game in JavaScript with scoring. |
|
Typing Speed Test |
Skill game |
Build a typing speed test in JavaScript with timer and error count=
. |
|
Maze Runner |
Maze puzzle |
Create a maze game in HTML and JavaScript with keyboard controls.<= o:p> |